<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .bg {
        position: relative;
        height: 180vh;
        background-color: black;
      }

      .tip {
        text-align: center;
        color: #fff;
        padding-top: 20px;
      }

      .box {
        position: absolute;
        z-index: 99;
        top: 80%;
        left: 50%;
        width: 200px;
        height: 56px;
        margin-top: -28px;
        margin-left: -100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #btn {
        position: relative;
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background-color: rgb(66 66 69);
      }

      #blue-circle {
        position: absolute;
        top: 80%;
        left: 50%;
        margin-top: -40px;
        margin-left: -40px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-color: #0071e3;
      }

      #icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-20px, -20px);
      }

      .text {
        color: #fff;
        line-height: 56px;
        margin-left: 20px;
      }
    </style>
  </head>
  <body>
    <div class="bg">
      <div class="tip">往下滚动查看效果</div>
      <div class="box">
        <div id="btn">
          <div class="text">今晚猎个痛快</div>
          <svg id="icon" width="40" height="40">
            <circle cx="20" cy="20" r="20" fill="#0071e3" />
            <g fill="white">
              <rect width="21" height="2" rx="2" ry="2" x="9" y="18"></rect>
              <rect width="2" height="21" rx="2" ry="2" x="19" y="9"></rect>
            </g>
          </svg>
        </div>
      </div>
      <div id="blue-circle"></div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>

    <script>
      window.onload = function () {
        gsap.registerPlugin(ScrollTrigger)

        const tl = gsap.timeline({
          scrollTrigger: {
            trigger: '.box',
            start: 'top 80%', // 开始位置
            onLeaveBack: () => {
              tl.killTweensOf('#blue-circle').reverse()
            }
          }
        })

        tl.from(['#btn', '#blue-circle'], {
          scale: 0,
          duration: 1,
          ease: 'power1.in',
          stagger: 0.5
        })
          .to('#blue-circle', {
            scale: 0
          })
          .from('#icon', {
            scale: 0
          })
          .to('#btn', {
            width: 200
          })
          .to(
            '#icon',
            {
              x: 50
            },
            '<'
          )
          .from('.text', {
            opacity: 0,
            x: -12
          })
      }
    </script>
  </body>
</html>
